<!-- 工业源变化-->
<template>
  <div class="app-container">
    <div v-show="showSearch">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px" class="search-form">
        <el-form-item label="年份" prop="year">
          <el-select v-model="queryParams.startYear" style="width: 90px">
            <el-option v-for="item in yearlist" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <span style="margin:0 4px;">~</span>
          <el-select v-model="queryParams.endYear" style="width: 90px">
            <el-option v-for="item in yearlist" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <!-- <el-date-picker v-model="queryParams.startYear" value-format="YYYY" type="year" placeholder="开始统计年份"></el-date-picker>
          <span style="margin:0 4px;">~</span>
          <el-date-picker v-model="queryParams.endYear" value-format="YYYY" type="year" placeholder="结束统计年份"></el-date-picker> -->
        </el-form-item>
        <el-form-item label="行政区划">
          <!-- <RegionSelect v-model:regionCode="queryParams.regionCode" style="width:200px"></RegionSelect> -->
          <el-select v-model="queryParams.regionCode" style="width: 100%">
            <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变化率" prop="changeType">
          <div style="width:300px;">
            <el-input placeholder="变化率" v-model="queryParams.changeValue" class="input-with-select">
              <template #prepend>
                <el-select v-model="queryParams.changeType" placeholder="请选择" style="width: 80px">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="大于" :value="1"></el-option>
                  <el-option label="等于" :value="2"></el-option>
                  <el-option label="小于" :value="3"></el-option>
                </el-select>
              </template>
              <template #append>%</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="指标名称" prop="indexName">
          <el-input style="width:200px;" v-model="queryParams.indexName" clearable />
          <!-- <el-select v-model="queryParams.indexCode" clearable placeholder="指标名称" style="width: 100%">
            <el-option v-for="(dict,index) in dis_Industry" :key="index" :label="dict.value" :value="dict.label"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
          <el-button icon="refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="download" :loading="exportLoading" @click="handleExport">导出</el-button>
        <el-button type="info" plain icon="Upload" :loading="leadingOpen" @click="handleImport">导入</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="fetchList"></right-toolbar>
    </el-row>
<!-- height="680px" -->
    <el-table v-loading="loading" :data="dataList" border @sort-change="sortChange">
      <el-table-column align="center" fixed label="序号" width="60" type="index" :index="(index) => { return (index+1+(queryParams.pageNum-1)*queryParams.pageSize) }" />
      <el-table-column align="center" label="指标名称" prop="title" width="300" />
      <el-table-column align="center" :label="queryParams.startYear+'年'" prop="v1" sortable width="100" />
      <el-table-column align="center" :label="queryParams.endYear+'年'" prop="v2" sortable width="100" />
      <el-table-column align="center" label="变化量" prop="changeNum" width="150" sortable />
      <el-table-column align="center" label="变化率(%)" prop="changeRate" width="120" sortable />
      <el-table-column align="center" label="变化原因说明（需说明变化量的80%以上）" prop="changeContent" min-width="120"/>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template #default="scope">
          <el-button link type="primary" icon="Document" @click="handleView(scope.row)">溯源</el-button>
          <el-button link type="primary" icon="Coordinate" @click="handleToExamine(scope.row)">填报</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="fetchList" /> -->
    <!-- 变化原因说明填报 -->
    <el-dialog title="变化原因说明" v-model="open" width="750px" append-to-body>
      <el-form ref="synthesisSaveformRef" :model="form" :rules="rules" label-width="120px" >
        <el-form-item label="指标名称：" prop="title">
          <el-input v-model="form.title" disabled placeholder="指标名称" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="queryParams.startYear+'年：'" prop="v1">
              <el-input v-model="form.v1" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="queryParams.endYear+'年：'" prop="v1">
              <el-input v-model="form.v2" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="变化量：" prop="changeNum">
              <el-input v-model="form.changeNum" disabled placeholder="变化量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="变化率(%)：" prop="changeRate">
              <el-input v-model="form.changeRate" disabled placeholder="变化率(%)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="变化原因说明：" prop="changeContent">
            <el-input v-model="form.changeContent" :autosize="{ minRows: 6, maxRows: 10 }"  type="textarea" placeholder="变化原因说明" />
          </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>

    </el-dialog>
    <!-- 导入弹窗组件 -->
    <LeadingInUpload v-model:open="leadingOpen" :title="'工业源变化统计导入'" :url="'/discharge/industryChange/synthesisImport'" @fileSubmit="handleQuery" />
  </div>
</template>

<script setup name="IndustrialChange">
import { exportSynthesis, synthesisList, synthesisSave } from "@/api/emissionSource/StatisticalAnalysis/industrial.js"
import { getRegionList } from "@/api/emissionSource/emissionData/industrialSources.js";
import {getyearsList} from "@/api/emissionSource/emissionData/industrialSources.js";
import staticRouter from "@/router/static";
import useUserStore from "@/store/modules/user";

const { proxy } = getCurrentInstance();

const userStore = useUserStore();

const { industry_change_category , dis_Industry} = proxy.useDict("industry_change_category","dis_Industry");

const loading = ref(false); // 遮罩层
const exportLoading = ref(false); // 导出遮罩层
const showSearch = ref(true); // 显示搜索条件
const dataList = ref([]); // 表格数据
const total = ref(0);
const open = ref(false);
const sort = ref(null);//排序
const yearlist = ref([]);//年列表数据
const rules = ref({
  changeContent: {
    required: true,
    message: "变化原因说明不能为空",
    trigger: "blur",
  },
});
const form = ref({});//表单
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  // regionCode:'',
  // endYear:'',
  // startYear:'',
  changeType:''
});
const buttonLoading = ref(false);
const cityList = ref([]);
const leadingOpen = ref(false);

/** 列表数据 **/
function fetchList(bool) {
  let  queryData = {...queryParams.value};
  if(sort.value) {
    queryData.sort = sort.value;
  }
  synthesisList(queryData).then(res=>{
    if(bool) {
      let queryData = res.data.reqParams;
      queryParams.value.regionCode = queryData.regionCode;
      queryParams.value.endYear = queryData.endYear;
      queryParams.value.startYear = queryData.startYear;
      queryParams.value.changeType = queryData.changeType;
      queryParams.value.changeValue = queryData.changeValue;
    }
    dataList.value = res.data.list
    total.value = res.data.total
  })
}
// 年数据接口
function getyearSelect() {
  getyearsList({ type: 1 }).then((res) => {
    yearlist.value = res.data;
  });
}
/**搜索**/
function handleQuery() {
  queryParams.value.pageNum = 1;
  fetchList();
}

function resetQuery() {
  /** 重置按钮操作 */
  proxy.resetForm("queryForm");
  queryParams.value.changeValue = null
  handleQuery();
}

// 导出操作
function handleExport() {
  proxy.$modal
    .confirm("是否确认导出所有数据项?", "警告", {
      type: "warning",
    })
    .then(() => {
      const queryData = Object.assign({}, queryParams.value, {
        pageNum: 1,
        pageSize: 10000,
      });
      exportLoading.value = true;
      return exportSynthesis(queryData);
    })
    .then((res) => {
      proxy.download(res.data);
    })
    .catch(() => {
      // 取消操作
    })
    .finally(() => {
      exportLoading.value = false;
    });
}
//朔源
function handleView(e) {
  let { regionCode,endYear,startYear,changeType,changeValue} = queryParams.value;
  let {title,code,changeNum} = e;
  proxy.$router.push({
    path: staticRouter.industrialView,
    query: {regionCode,endYear,startYear,changeType,changeValue,changeNum,indexCode:code},
  });
}
// 填报
function handleToExamine(e) {
  let {regionCode,endYear,startYear,changeType,changeValue} = queryParams.value;
  form.value = {...e,regionCode,endYear,startYear,changeType,changeValue} ;
  open.value = true;
}
//填报确定
function submitForm() {
  proxy.$refs["synthesisSaveformRef"].validate((valid) => {
    if (valid) {
      buttonLoading.value = true;
      synthesisSave(form.value)
      .then((response) => {
        proxy.$modal.msgSuccess("填报成功");
        open.value = false;
        fetchList();
      })
      .finally(() => {
        buttonLoading.value = false;
      });
    }
  });
}
//取消
function cancel() {
  open.value = false;
  proxy.resetForm("synthesisSaveformRef");
}
/** 导入操作 **/
function handleImport() {
  leadingOpen.value = true;
}
//排序
function sortChange(e) {
  let type = e.order=="descending"?'_desc':'_asc'
  sort.value = e.prop+type;
  fetchList();
}
function getciytList() {
  getRegionList({ type: 2 }).then((res) => {
    console.log(res);
    cityList.value = res.data;
  });
}





fetchList(true,null);
getyearSelect();
getciytList();
</script>
<style scoped="scoped" lang="scss">
::v-deep .el-date-editor.el-input {
  width:100px !important;
}
</style>
